<template>
  <!-- 登录-->
  <div class="login">
    <!-- 账密登录 -->
    <div class="login_password" v-if="typeShow">
      <div>密码登录<img src="../../public/img/other/login.png" alt="" /></div>
      <input
        type="number"
        placeholder="请输入手机号码"
        v-model="mobile"
        @blur="mobileBlur"
      />
      <input type="password" placeholder="请输入你的密码" v-model="password" />
      <div @click="loginClick">登录</div>
      <div>
        <div @click="passwordChange">验证码登录</div>
        <!-- <div>忘记密码？</div> -->
      </div>
    </div>
    <!-- 验证码登录 -->
    <div class="login_code" v-else>
      <div>
        验证码登录/注册<img src="../../public/img/other/login.png" alt="" />
      </div>
      <input type="number" placeholder="请输入手机号码" v-model="mobile" />
      <p>未注册的手机号验证后自动创建账户</p>
      <div>
        <input type="number" placeholder="请输入验证码" v-model="code" />
        <div @click="sendCode">{{ codetext }}</div>
      </div>
      <div @click="logincodeClick">登录</div>
      <div @click="codeChange">密码登录</div>
    </div>
    <div class="login_xieyi">
      <input type="checkbox" v-model="xieyishow" />
      <div>勾选则表示已阅读并同意<span>《声贝用户协议》</span></div>
    </div>
    <!-- <p><span>——</span>您也可以用以下方式登录<span>——</span></p> -->
    <!-- 微信登录 -->
    <!-- <div @click="wechatLogin">
      <img src="../../public/img/other/wechat.png" alt="" />
      微信登录
    </div> -->
  </div>
</template>

<script>
import { Toast } from "vant";
import md5 from "js-md5";
import qs from "qs";
export default {
  data() {
    return {
      mobile: "", //手机号
      password: "", //密码
      mobileShow: false,
      typeShow: true,
      xieyishow: false,
      codetext: "发送",
      code: "", //验证码
      codeTime: true,
      // userinfo: {
      //   //用户信息
      //   userId: "",
      //   diamondMoney: 0,
      //   token: "",
      // },
      // loginCode: "", //code值
    };
  },
  created() {
    let url = location.href;
    console.log(this.$store.state.pathName);
    let codetest = RegExp(/code/);
    // console.log(url, codetest.test(url));
    if (codetest.test(url)) {
      //地址中有code值
      this.loginCode = url.split("?")[1].split("&")[0].split("=")[1];
      // console.log(this.loginCode);
      this.getUserInfo();
    }
  },
  methods: {
    sendCode() {
      if (this.codeTime) {
        this.$axios
          .post(
            "/user/sendRegCode",
            qs.stringify({ phone: this.mobile, type: 5, country_code: "" })
          )
          .then((res) => {
            console.log(res.data);
            Toast(res.data.text);
            if (res.data.status == 0) {
              this.codeTime = false;
              let time = 59;
              let timer = setInterval(() => {
                this.codetext = time + "s";
                time = time - 1;
                if (time == 0) {
                  this.codetext = "发送";
                  clearInterval(timer);
                }
              }, 1000);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        Toast("请勿重复点击");
      }
    },
    passwordChange() {
      this.typeShow = false;
    },
    codeChange() {
      this.typeShow = true;
    },
    wechatLogin() {
      let codeUrl = "";
      let url = encodeURIComponent("http://api.guotianyuewan.com/h5/#/login");
      codeUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc051f7e1f2031268&redirect_uri=" +
        url +
        "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
      location.href = codeUrl;
    },
    setCookie(cname, cvalue, exdays) {
      let date = new Date();
      date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000);
      let expires = "expires=" + date.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    },
    getUserInfo() {
      //根据code获取用户信息
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      this.$axios
        .post(
          "/index/getOpenId",
          qs.stringify({ code: this.loginCode, time: timestamp })
        )
        .then((res) => {
          console.log(res);
          if (res.data.result.is_register == 0) {
            this.setCookie("token", res.data.result.user_info.token, 180);
            this.setCookie("userId", res.data.result.user_info.userId, 180);
            setTimeout(() => {
              this.$router.push(this.$store.state.pathName);
              // location.href = "http://api.guotianyuewan.com/h5/#/recharge";
            }, 500);
          } else {
            Toast("你还未注册会员，请登录APP注册");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    mobileBlur() {
      if (this.mobile) {
        let timestamp = (Date.parse(new Date()) / 1000).toString();
        let params = {
          phone: this.mobile,
          time: timestamp,
        };
        this.$axios
          .post("/user/isReg", qs.stringify(params))
          .then((res) => {
            console.log(res.data);
            if (res.data.status != 101) {
              Toast("你还未注册会员，请登录APP注册");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    loginClick() {
      //登录
      if (!this.xieyishow) {
        return Toast("请勾选用户协议并继续");
      }
      if (!this.mobile) {
        return Toast("手机号不能为空");
      }
      if (!this.password) {
        return Toast("密码不能为空");
      }
      let params = {
        mobile: this.mobile,
        password: this.password,
      };
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      this.$axios
        .post("/user/login", qs.stringify(params))
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 0) {
            this.setCookie(
              "token",
              res.data.result.token,
              res.data.result.tokenExpiryTime
            );
            this.setCookie(
              "userId",
              res.data.result.userId,
              res.data.result.tokenExpiryTime
            );
            this.return();
          } else {
            Toast(res.data.text);
            this.password = "";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    logincodeClick() {
      //登录
      if (this.mobile) {
        if (this.code) {
          if (this.xieyishow) {
            let params = {
              mobile: this.mobile,
              authCode: this.code,
            };
            let timestamp = (Date.parse(new Date()) / 1000).toString();
            this.$axios
              .post("/user/codelogin", qs.stringify(params))
              .then((res) => {
                console.log(res.data);
                if (res.data.status == 0) {
                  this.setCookie(
                    "token",
                    res.data.result.token,
                    res.data.result.tokenExpiryTime
                  );
                  this.setCookie(
                    "userId",
                    res.data.result.userId,
                    res.data.result.tokenExpiryTime
                  );
                  this.return();
                } else {
                  Toast(res.data.text);
                  this.password = "";
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            Toast("请勾选用户协议并继续");
          }
        } else {
          Toast("验证码不能为空");
        }
      } else {
        Toast("手机号不能为空");
      }
    },
    return() {
      setTimeout(() => {
        this.$router.push(this.$store.state.pathName);
      }, 500);
    },
    setCookie(cname, cvalue, exdays) {
      let date = new Date();
      date.setTime(exdays);
      let expires = "expires=" + date.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
  },
};
</script>
<style>
.login {
  width: 100vw;
  overflow: auto;
  height: 100vh;
}
.login_password > input {
  width: 83.5vw;
  padding: 0 6.1vw;
  box-sizing: border-box;
  margin-left: 8.3vw;
  height: 13.3vw;
  /* line-height: 13.3vw; */
  background: rgba(249, 249, 249, 1);
  border-radius: 7.15vw;
  border: none;
  margin-top: 10.7vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 3.6vw;
}
.login_password > input:nth-of-type(2) {
  margin-top: 6.7vw;
}
.login_password > div:nth-of-type(1) {
  margin-top: 12.3vw;
  margin-left: 8.3vw;
  font-size: 6.9vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 9.9vw;
  position: relative;
}
.login_password > div:nth-of-type(1) img {
  position: absolute;
  z-index: -5;
  left: 16vw;
  bottom: 0.9vw;
  height: 1.6vw;
}
.login_password > div:nth-of-type(2) {
  width: 83.5vw;
  height: 13.3vw;
  text-align: center;
  line-height: 13.3vw;
  border-radius: 6.65vw;
  font-size: 4.3vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-top: 10.7vw;
  margin-left: 8.25vw;
  background: linear-gradient(135deg, #fea16a, #fe6206);
}
.login_password > div:nth-of-type(2) > img {
  height: 4.8vw;
  vertical-align: middle;
}
.login_password > div:nth-of-type(3) {
  width: 69.6vw;
  margin-left: 15.2vw;
  margin-top: 4vw;
  display: flex;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  justify-content: space-between;
}
.login_password > div:nth-of-type(3) > div:nth-child(1) {
  color: #fe804d;
}

.login_code > input {
  width: 83.5vw;
  padding: 0 6.1vw;
  box-sizing: border-box;
  margin-left: 8.3vw;
  height: 13.3vw;
  /* line-height: 13.3vw; */
  background: rgba(249, 249, 249, 1);
  border-radius: 7.15vw;
  border: none;
  margin-top: 10.7vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 3.6vw;
}
.login_code > div:nth-of-type(2) {
  width: 83.5vw;
  padding: 0 6.1vw;
  box-sizing: border-box;
  margin-left: 8.3vw;
  height: 13.3vw;
  /* line-height: 13.3vw; */
  background: rgba(249, 249, 249, 1);
  border-radius: 7.15vw;
  border: none;
  margin-top: 6.7vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 3.6vw;
  display: flex;
  justify-content: space-between;
}
.login_code > div:nth-of-type(2) input {
  height: 13.3vw;
  width: 55vw;
  border: none;
  background: rgba(249, 249, 249, 1);
}
.login_code > div:nth-of-type(2) div {
  height: 13.3vw;
  line-height: 13.3vw;
  text-align: right;
  font-size: 3.5vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fe804d;
}
.login_code > p {
  font-size: 2.7vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #cccccc;
  margin-left: 8.3vw;
  margin-top: 3.2vw;
}
.login_code > div:nth-of-type(1) {
  margin-top: 12.3vw;
  margin-left: 8.3vw;
  font-size: 6.9vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 9.9vw;
  position: relative;
}
.login_code > div:nth-of-type(1) img {
  position: absolute;
  z-index: -5;
  left: 40vw;
  bottom: 0.9vw;
  height: 1.6vw;
}
.login_code > div:nth-of-type(3) {
  width: 83.5vw;
  height: 13.3vw;
  text-align: center;
  line-height: 13.3vw;
  border-radius: 6.65vw;
  font-size: 4.3vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-top: 10.7vw;
  margin-left: 8.25vw;
  background: linear-gradient(135deg, #fea16a, #fe6206);
}
.login_code > div:nth-of-type(3) > img {
  height: 4.8vw;
  vertical-align: middle;
}
.login_code > div:nth-of-type(4) {
  margin-left: 15.2vw;
  margin-top: 4vw;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fe804d;
}

.login_xieyi {
  position: relative;
  top: 33.3vh;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 75vw;
  left: 12.5vw;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  height: 5vw;
  line-height: 5vw;
}
.login_xieyi input {
  /* margin-top: 0.8vw; */
  height: 5vw;
}
.login_xieyi span {
  color: #fe804d;
}
</style>